<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "ab8f2c8886568148ed02d7f8388f2e30",
        };
    </script>
     <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=ec8361ad784cc315dca889247737fb91&plugin=AMap.TruckDriving"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script>
    map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别

    });
    map.plugin(["AMap.ToolBar"], function () {
        map.addControl(new AMap.ToolBar());
    });
    map.setStatus({scrollWheel: false})

    var colors = "#000000";
    var pathAll = [
        {
            "lnglat": {
                "Q": 40.18911723,
                "R": 116.62004853000002,
                "lng": 113.856868,
                "lat": 34.530146
            },
            "date": "2024-11-22 15:17",
            "info": "新郑机场"
        },
        {
            "lnglat": {
                "Q": 39.76641117,
                "R": 117.32810531000001,
                "lng": 113.783872,
                "lat": 34.767426
            },
            "date": "2024-11-22 15:17",
            "info": "郑州东站"
        },
        {
            "lnglat": {
                "Q": 39.9209355,
                "R": 119.04707410999998,
                "lng": 113.593606,
                "lat": 34.854278
            },
            "date": "2024-11-22 15:17",
            "info": "小双桥"
        }, {
            "lnglat": {
                "Q": 41.74161305,
                "R": 123.57021313000001,
                "lng": 113.674094,
                "lat": 34.76157
            },
            "date": "2024-11-22 15:17",
            "info": "管城区"
        },
        {
            "lnglat": {
                "Q": 41.74014158,
                "R": 123.54029222999998,
                "lng": 113.431192,
                "lat": 34.750952
            },
            "date": "2024-11-22 15:17",
            "info": "郑州西站"
        }
    ]

    MapLoad(pathAll, colors);

    function MapLoad(data, color) {
        var path = data;

        //构造路线导航类
        var driving = new AMap.TruckDriving({
            map: map,
            policy: 0,
            size: 4,
            hideMarkers: true,
            showTraffic: false,
            outlineColor: color
            // panel: "panel"
        });

        // 根据起终点名称规划驾车导航路线
        driving.search(path, function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
                //log.success('绘制驾车路线完成')
            } else {
                //log.error('获取驾车数据失败：' + result)
            }
        });

        // 加载点
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
        });
        var endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-96, -3)
        });
        var viaIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-52, -3)
        });

        for (var i = 0; i < path.length; i++) {
            var marker;
            if (i == 0) {
                marker = new AMap.Marker({
                    map: map,
                    icon: startIcon,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30)
                });
            } else if (i == path.length - 1) {
                marker = new AMap.Marker({
                    map: map,
                    icon: endIcon,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30)
                });
            } else if (i == path.length - 3) {
                marker = new AMap.Marker({
                    map: map,
                    icon: viaIcon,
                    position: path[i].lnglat,
                    offset: new AMap.Pixel(-13, -30)
                });
            }
            marker.content = "<p class='input-item'>" + path[i].info + "</p>";
            marker.content += "<p class='input-item'>时间：" + path[i].date + "</p>";
            marker.on("click", openInfo);
        }
    }

    //在指定位置打开信息窗体
    function openInfo(e) {
        var infoWindow = new AMap.InfoWindow({
            closeWhenClickMap: true
        });
        infoWindow.setContent(e.target.content);
    }
</script>
</body>
</html>